<template>
  <div class="container">
    <Headbar />
    <HeadMenu />
    <div class="yh-layout-box comments-container">
      <div class="comments-breadcrumb">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>买家中心</el-breadcrumb-item>
          <el-breadcrumb-item>订单中心</el-breadcrumb-item>
          <el-breadcrumb-item>订单：{{ orderNo }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div class="order-comments-contents">
        <div class="order-comments-header">
          <div class="header-title fl">订单评价</div>
          <div class="header-title fr comments-tips" @click="handleAttention()">评价需知
            <img src="../../../assets/images/member/comment_ico03.png">
          </div>
        </div>
        <div class="order-comments-list">
          <div class="order-company-wrap">
            <div class="companyName">
              {{ factoryName }} <img src="../../../assets/images/member/comment_ico02.png">
            </div>
            <div class="order-table">
              <div class="order-table-header">
                <div class="header-tit product-tit">商品</div>
                <div class="header-tit state-tit">状态</div>
                <div class="header-tit operate-tit">操作</div>
              </div>
              <div class="order-table-con">
                <div class="order-table-li" v-for="(item, index) in list">
                  <div class="table-product-info fl">
                    <span class="pd-pic-view">
                      <img :src="URL.PIC + item.productPic" @click="routeToPath('/product/'+item.productId)">
                    </span>
                    <span class="pd-title" @click="routeToPath('/product/detail?id='+item.productId)">
                      {{ item.productName }}
                    </span>
                  </div>
                  <div class="table-product-state fl">
                    <!-- 2019-03-05 10:34:31 初评 -->
                    {{ item.isEvaluation == 0 ? '待评价' :  '已评价' }}
                  </div>
                  <!-- <div class="table-product-state fl">
                    待评价
                  </div> -->
                  <div class="table-product-operation fl">
                    <!-- <div class="view-comments-btn operate-button">查看评价</div>
                    <div class="add-comments-btn operate-button">追评</div>
                    <div class="delete-comments-btn operate-button">删除评价</div> -->

                    <!-- <router-link :to="{name:'Comments', query:{orderId:item.id, productId:item.productId, productPic:item.productPic, productName:item.productName, specifications:item.specifications, productSpecificationId:item.productSpecificationId}}" class="add-btn" v-if="item.isEvaluation == 0">评价</router-link>
                    <router-link :to="{name:'CommentsDetail', query:{ evaluationId: item.evaluationId, productId:item.productId, productPic:encodeURIComponent(item.productPic), productName:item.productName}}" class="add-btn" v-if="item.isEvaluation == 1">查看评价</router-link> -->

                    <a @click="routeToPath('/member/orders/comments?orderId=' + item.id+'&productId='+item.productId+'&productPic='+item.productPic+'&productName='+item.productName+'&specifications='+item.specifications+'&productSpecificationId='+item.productSpecificationId)" class="add-btn" v-if="item.isEvaluation == 0">评价</a>
                    <a @click="routeToPath('/member/orders/commentsDetail?evaluationId=' + item.evaluationId+'&productId='+item.productId+'&productPic='+encodeURIComponent(item.productPic)+'&productName='+item.productName)" class="add-btn" v-if="item.isEvaluation == 1">查看评价</a>

                  </div>
                  <!-- <div class="table-product-operation fl">
                    <div class="goComments">评价</div>
                  </div> -->
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
    <Footbars/>
  </div>
</template>

<script>
import Headbar from '@/components/Layouts/Headbar'
import HeadMenu from '@/components/Layouts/HeadMenu'
import Footbars from '@/components/Layouts/Footbars'
import { getOrderEvaluationList } from '@/api/order'
export default {
  name: 'CommentsList',
  components: {
    Headbar,
    HeadMenu,
    Footbars,
  },
  data() {
    return {
      factoryName: this.getUrlParams('factoryName'),
      list: [],
      orderNo: this.getUrlParams('orderNo')
    }
  },
  created() {
    this.getOrderEvaluationList()
  },
  methods: {
    handleAttention() {
      const h = this.$createElement;
      this.$msgbox({
        title: '评价须知',
        customClass: 'sales-msgbox',
        message: h('p', null, [
          h('p', { style: 'color: #999' }, '1. 您的评价将影响到卖家的好评率。请您根据实际交易情况，给予真实客观的评价。'),
          h('p', { style: 'color: #999' }, '2. 确认收货后的15天内，您可以对此次交易进行评价，超过15天未评价将默认好评。'),
          h('p', { style: 'color: #999' }, '3. 评价后的30天内，您有一次机会删除给卖家的评价，且可追加评价对该次交易重新进行评价。超出30天后，不可再追加评价。'),
          h('p', { style: 'color: #999' }, '4. 每次交易仅可追加一次评价。')
        ]),
        showCancelButton: false,
        showConfirmButton: false
      }).then(() => {

      }).catch(() => {

      });
    },
    getOrderEvaluationList() {
      const params = {
        orderNo: this.getUrlParams('orderNo')
      }
      getOrderEvaluationList(params).then(res => {
        if(res.code == 200){
          this.list = res.data
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/pages/comments.scss';
.comments-container .order-comments-contents .order-comments-list .order-company-wrap .order-table .order-table-con .order-table-li .table-product-operation{
  margin-top: 43px;
}
</style>
